<template>
    <div>
        <el-dialog v-model="dialogVisible" :modal=false width="924" @close="closeTan">
            <div class="tantop flex-between">
                <div class="rightbox flex-between">
                    <el-select v-model="campusId" placeholder="校区" style="width: 240px" @change="campusChange">
                        <el-option v-for="(item, index) in data.campusList" :key="index" :label="item.campusName"
                            :value="item.campusId" />
                    </el-select>
                    <el-select v-model="dormitoryId" placeholder="楼栋" clearable style="width: 240px"
                        @change="dormitoryChange" @clear="clear">
                        <el-option v-for="(item, index) in data.dormitoryList" :key="index" :label="item.label"
                            :value="item.dormitoryId" />
                    </el-select>
                    <!-- <el-select v-model="value" placeholder="状态" style="width: 240px">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select> -->
                </div>
            </div>

            <div class="offlist" ref="tableContainer">
                <div class="sct">
                    宿舍间数：{{ data.count }}间
                </div>
                <el-table :data="data.lastData" height="450" style="width: 100%" @mouseenter="stopScroll"
                    @mouseleave="createScroll" empty-text="暂无数据" ref="tableRef">
                    <el-table-column type="index" align="center" label="序号" width="200" />
                    <el-table-column prop="campusName" align="center" label="校区" width="230" />
                    <el-table-column prop="dormitoryRoomName" align="center" label="宿舍号" width="230" />
                    <el-table-column prop="balance" align="center" label="剩余电量(度)" />
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive, getCurrentInstance, nextTick, defineProps } from 'vue'
const { proxy } = getCurrentInstance()
const dialogVisible = ref(false)

let data = reactive({
    campusList: [],
    dormitoryList: [],
    lastData: [],
    count: null
})

let props = defineProps({
    index: {
        type: String,
        default: null
    }
})

let campusId = ref(null)
let dormitoryId = ref(null)

let open = () => {
    dialogVisible.value = true
    campusId.value = null
    dormitoryId.value = null
    campusList()
}
let close = () => {
    dialogVisible.value = false
}
// 校区列表
let campusList = async () => {
    let res = await proxy.$https.campusList()
    console.log('campusList', res);
    data.campusList = res.data
    data.campusList.forEach((item) => {
        item.campusId = item.id
    })
    campusId.value = data.campusList[1].id
    dormitoryList()
    countDeviceNum()
}
// 楼栋列表
let dormitoryList = async () => {
    let res = await proxy.$https.dormitoryList({
        campusId: campusId.value
    })
    console.log('dormitoryList', res);
    data.dormitoryList = res.data
    data.dormitoryList.forEach((item) => {
        item.dormitoryId = item.id
    })
}
// 校区改变
let campusChange = (id) => {
    campusId.value = id
    dormitoryList()
    //清空楼栋
    dormitoryId.value = null
    countDeviceNum()
}
// 楼栋改变
let dormitoryChange = (id) => {
    dormitoryId.value = id
    countDeviceNum()
}
// 清空楼栋
let clear = () => {
    dormitoryId.value = null
    countDeviceNum()
}

// 获取数据
let countDeviceNum = async () => {
    let res = await proxy.$https.countDeviceNum({
        campusId: campusId.value,
        dormitoryId: dormitoryId.value
    })
    console.log('countDeviceNum', res);
    if (props.index == "1") {
        data.lastData = res.data.ownElectricityDevices
        data.count = res.data.ownElectricityCount
    }
    if (props.index == "2") {
        data.lastData = res.data.low20ElectricityDevices
        data.count = res.data.low20ElectricityCount
    }
    if (props.index == "3") {
        data.lastData = res.data.exceedElectricityDevices
        data.count = res.data.exceedElectricityCount
    }
    if (data.lastData.length > 0) {
        createScroll()
    } else {
        stopScroll()
    }
}


const tableContainer = ref(null);
const tableRef = ref(null);
let timer = null;
// 停止滚动
const stopScroll = () => {
    clearInterval(timer);
    timer = null;
};
// 创建滚动效果
const createScroll = () => {
    stopScroll(); // 先清除已有的定时器
    // 确保DOM已更新
    nextTick(() => {
        // 获取表格滚动容器
        const table = tableRef.value.layout.table.refs;
        const tableWrapper = table.bodyWrapper.firstElementChild.firstElementChild;
        // 设置滚动定时器
        timer = setInterval(() => {
            tableWrapper.scrollTop += 1; // 每次滚动1px
            // 检测是否滚动到了底部
            if (tableWrapper.clientHeight + tableWrapper.scrollTop >= tableWrapper.scrollHeight - 1) {
                tableWrapper.scrollTop = 0; // 回到顶部，实现循环
            }
        }, 20); // 滚动间隔，控制滚动速度
    });
};
let closeTan = () => {
    stopScroll();
}

defineExpose({
    open,
    close
})

</script>

<style lang='less' scoped>
:deep(.el-dialog) {
    height: 630px;
    background: #021b40;
    box-shadow: 6px 6px 21.3px 0 rgba(0, 17, 51, 0.61);
    // opacity: 0.9;
    padding: 0;
}

.tantop {
    padding: 15px 34px;
    background: linear-gradient(90deg, rgba(10, 79, 168, 0.56) 0%, rgba(47, 93, 153, 0.00) 100%);

    .rightbox {
        width: 400px;

        :deep(.el-select__wrapper) {
            width: 180px;
            color: #fff;
            border-radius: 69px;
            border: 1px solid #4ED0FF;
            padding: 13px 35px;
            border-radius: 69px;
            background: linear-gradient(180deg, rgba(57, 172, 255, 0.14) 0%, rgba(48, 109, 153, 0.01) 100%);
            font-size: 20px;
        }

        :deep(.el-select__placeholder) {
            color: #FFF;
        }

        :deep(.el-select__suffix) {
            color: #4ECFFE;
        }

    }
}

.offlist {
    margin-top: 25px;
    padding: 0px 38px;

    .sct {
        background: linear-gradient(180deg, #1BA7FF 56.9%, #30CCEA 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        font-size: 15px;
        letter-spacing: 1.65px;
        border-radius: 2px;
        border: 1px solid #2F598F;
        padding: 5px 10px;
        display: inline-block;
        margin-bottom: 13px;
    }

    :deep(.el-table) {
        --el-table-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        --el-table-tr-bg-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        --el-table-border-color: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
        color: #CAD4E5;
        font-size: 16px;
    }

    :deep(.el-table thead) {
        color: #CAD4E5;
    }

    :deep(.el-table th.el-table__cell) {
        background: linear-gradient(180deg, rgba(25, 158, 255, 0.26) 0%, rgba(25, 158, 255, 0.72) 100%);
    }

    :deep(.el-table .el-table__body tr:hover>td) {
        background-color: transparent !important;
        /* 或者你想要的其他样式 */
    }

    :deep(.el-table__body) {
        border-collapse: separate !important;
        border-spacing: 0 5px !important;
        table-layout: auto !important;
    }

    :deep(.el-table tr) {
        background: linear-gradient(180deg, rgba(0, 28, 67, 0.00) 0%, rgba(0, 70, 169, 0.38) 100%);
    }

    :deep(.el-table .cell) {
        word-break: break-all;
    }

}
</style>